<template>
	<div class="charts flex">
		<div ref="barChartRef" class="bar-chart"></div>
		<div ref="pieChartRef" class="pie-chart"></div>
	</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';

export default defineComponent({
	setup() {
		const barChartRef = ref<HTMLDivElement | null>(null);
		const pieChartRef = ref<HTMLDivElement | null>(null);
		const { setOptions: setBarOptions } = useECharts(barChartRef as Ref<HTMLDivElement>);
		const { setOptions: setPieOptions } = useECharts(pieChartRef as Ref<HTMLDivElement>);
		onMounted(() => {
			setBarOptions({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						lineStyle: {
							width: 1,
							color: '#019680',
						},
					},
				},
				grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
				xAxis: {
					type: 'category',
					data: [...new Array(12)].map((_item, index) => `${index + 1}月`),
				},
				yAxis: {
					type: 'value',
					max: 8000,
					splitNumber: 4,
				},
				series: [
					{
						data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
						type: 'bar',
						barMaxWidth: 80,
					},
				],
			});

			setPieOptions({
				title: {
					text: 'Referer of a Website',
					subtext: 'Fake Data',
					left: 'center',
				},
				tooltip: {
					trigger: 'item',
				},
				legend: {
					orient: 'vertical',
					left: 'left',
				},
				series: [
					{
						name: 'Access From',
						type: 'pie',
						radius: '50%',
						data: [
							{ value: 1048, name: 'Search Engine' },
							{ value: 735, name: 'Direct' },
							{ value: 580, name: 'Email' },
							{ value: 484, name: 'Union Ads' },
							{ value: 300, name: 'Video Ads' },
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)',
							},
						},
					},
				],
			});
		});

		return {
			barChartRef,
			pieChartRef,
		};
	},
});
</script>
<style lang="less" scoped>
.charts {
	width: 100%;
	height: 100%;
	margin-top: 40px;
}
.bar-chart {
	width: 50%;
	height: 400px;
}
.pie-chart {
	margin-top: 20px;
	width: 50%;
	height: 400px;
}
</style>
